Detector Docs

Español

English

Español

English

Appearance

Contraste no textual — Estado de foco ​

Esta revisión encuentra elementos gráficos interactivos que no comunican adecuadamente que tienen el foco del teclado — en particular, cuando la única señal de foco es un cambio de color demasiado tenue para notarse.

Aplica a íconos, botones personalizados, gráficos vectoriales interactivos e indicadores gráficos como las flechas de un carrusel o los interruptores visuales.

Qué comprueba la herramienta ​

Dos cosas:

  • El estado de foco no debe depender solo del color.
  • Si sí hay un cambio de color, debe alcanzar al menos 3:1 contra el fondo adyacente.

Por qué importa ​

Los usuarios con baja visión o daltonismo pueden no percibir en absoluto un cambio de color tenue. Sin un indicador de foco perceptible, la navegación por teclado se vuelve una adivinanza: el usuario pierde la referencia de qué elemento está activo.

Cómo se comporta la revisión ​

1. Localiza los controles gráficos interactivos. Los controles no textuales se ubican tanto por análisis visual con un modelo de IA —íconos, gráficos vectoriales, botones personalizados— como recorriendo la página, incluidos los pseudo-elementos decorativos.

2. Registra cómo se ve cada control sin foco. Se anotan los colores relevantes: el relleno y el trazo de los gráficos vectoriales, el color del texto y el color de fondo.

3. Aplica el foco por teclado y vuelve a capturar las mismas propiedades.

4. Compara los dos estados, buscando un cambio de color en este orden:

  1. el relleno o el trazo de los gráficos vectoriales dentro del control
  2. el relleno, el trazo o el color del propio control
  3. el color de fondo del control

Los indicadores externos como un contorno, un borde o un anillo de sombra no se consideran aquí. Esos los cubre Cómo se evalúa el contraste del indicador de foco.

5. Determina el fondo adyacente. Se usa el color de fondo del control con el foco puesto. Si es transparente, la herramienta busca hacia arriba entre los elementos contenedores el primer color sólido. Si no encuentra ninguno, asume blanco.

6. Calcula el contraste entre el color del ícono con foco y ese fondo. Por debajo de 3:1 se reporta.

Cuándo reporta un problema ​

Cuando se cumple todo lo siguiente:

  • El elemento es visible, enfocable por teclado y no textual.
  • Cambia de color al recibir el foco.
  • No existe otro indicador visual que no esté basado en el color.
  • El contraste entre el color con foco y el fondo está por debajo de 3:1.

Cuándo no reporta ​

  • El contraste es de 3:1 o más.
  • Existe un indicador no basado en color — un contorno, un borde visible, etc.
  • El elemento está deshabilitado.
  • El elemento no es alcanzable por teclado.
  • No hay cambio de color entre estados.
  • No se puede determinar un fondo fiable, y el contraste queda no concluyente.

Qué dice el reporte ​

Título: Focused non-text element does not have sufficient contrast against its background

Descripción: The [color element name] of [element name] in its focused state ([#hex-focus]) does not have sufficient contrast against the adjacent background ([#hex-background]). The contrast ratio is X.XX, which does not meet the minimum 3:1 ratio required.

Resultado esperado: Non-text elements must have a focus indicator that is not based solely on color, or the color used must meet a minimum contrast ratio of 3:1 against the adjacent background.

Checkpoint WCAG: 1.4.11 — Contraste no textual

Tipo de issue: Color contrast

Pasos para reproducir, tal como aparecen en el reporte:

  1. Using any desktop browser, open [URL]
  2. Press Tab to navigate to the [element name] [element type]
  3. Observe the visual change when the element receives focus
  4. Measure the contrast ratio between the focused element and the background

Cómo verificarlo a mano ​

  1. Abre la página en cualquier navegador de escritorio.
  2. Navega con la tecla Tab.
  3. Localiza los controles gráficos interactivos.
  4. Observa qué cambia cuando cada uno recibe el foco.
  5. Comprueba si hay algún indicador adicional además del color, y si el propio cambio de color llega a 3:1.

Limitaciones conocidas ​

  • El análisis de IA puede perderse elementos complejos o dinámicos.
  • Los indicadores externos no se evalúan aquí — los contornos y bordes pertenecen a otra revisión.
  • Los fondos dinámicos o con gradiente reducen la precisión.
  • La transparencia puede dar resultados no concluyentes, y en ese caso el caso se omite en lugar de reportarse.

Referencia WCAG ​

Criterio de conformidad 1.4.11 Contraste no textual (Nivel AA)